<template>
	<view class="viewpage">
		 <!-- :webview-styles="{width:'0',height:'0'}" -->
		<web-view :src="srcweb" @message="handlePostMessage" ref="webview" :webview-styles="{width:'0',height:'0',position: 'absolute',top: '-500',left: '-375'}"></web-view>
		<div class="ring">Loading
			<text></text>
		</div>
	</view>
</template>

<script>
	//此页面用来配置加载项目前的配置
	export default {
		data() {
			return {
				webUrl:'https://api.imdemo.top/ac/app/api/u/read/uniapp?app_id=1&c_api_token=c_api_token',
				srcweb:'',
				webview:null
			}
		},
		onReady() {
			var currentWebview = this.$scope.$getAppWebview();
			this.webview = currentWebview.children()[0]
		},
		onLoad() {
			uni.getNetworkType({
				success: (e) => {
					if(e.networkType != 'none'){
						this.srcweb = this.webUrl
					}else{
						uni.onNetworkStatusChange((res)=>{
							if(res.isConnected){
								this.srcweb = this.webUrl
							}
						})
					}
				}
			})
		},
		methods: {
			handlePostMessage(e){
				console.log(e);
				try{
					if(e.detail.data[0].methodname == 'webviewLoaded'){
						this.webview.evalJS(`
						    findVid((vid) => {
								console.log('vid-uniapp------',vid)
								uni.postMessage({
									data: {
										methodname: 'findVid',
										data:vid
									}
								});
						    });
						`);
					}else if(e.detail.data[0].methodname == 'findVid'){
						if(e.detail.data[0].data){
							this.webview.evalJS(`
							    findV((v) => {
									uni.postMessage({
										data: {
											methodname: 'findV',
											data:v
										}
									});
							    });
							`);
						}else{
							uni.$emit('iframeGo',false)
						}
					}else if(e.detail.data[0].methodname == 'findV'){
						let findV = JSON.parse(e.detail.data[0].data)
						let searchParams = JSON.parse(findV.v_searchParams)
						if(searchParams.p){
							uni.setStorageSync('plat_code',searchParams.p)
						}
						if(searchParams.q){
							console.log(searchParams.q);
							uni.setStorageSync('parent_code',searchParams.q)
						}else{
							uni.removeStorageSync('parent_code')
						}
						if(searchParams.u){
							uni.setStorageSync('user_code',searchParams.u)
						}else{
							uni.removeStorageSync('user_code')
						}
						uni.$emit('iframeGo',true)
						console.log(searchParams);
					}
					
				}catch(e){
					console.log(e);
					uni.$emit('iframeGo',false)
				}
			},
		}
	}
</script>

<style lang="scss">
	.viewpage{
		height: 100vh;
		background: url(/static/qidongye.png);
		background-size: 100% 100%;
	}
	.ring {
		position: absolute;
		top: 60%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100px;
		height: 100px;
		background: transparent;
		border: 3px solid #3c3c3c;
		border-radius: 50%;
		text-align: center;
		line-height: 100px;
		font-family: sans-serif;
		font-size: 15px;
		color: #fff000;
		letter-spacing: 4px;
		text-transform: uppercase;
		text-shadow: 0 0 10px #fff000;
		box-shadow: 0 0 20px rgba(0, 0, 0, .5);
		

		text {
			display: block;
			position: absolute;
			top: calc(50% - 2px);
			left: 50%;
			width: 50%;
			height: 4px;
			background: transparent;
			transform-origin: left;
			animation: animate 2s linear infinite;
		}

		text:before {
			content: '';
			position: absolute;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background: #fff000;
			top: -6px;
			right: -8px;
			box-shadow: 0 0 20px #fff000;
		}
	}

	.ring:before {
		content: '';
		position: absolute;
		top: -3px;
		left: -3px;
		width: 100%;
		height: 100%;
		border: 3px solid transparent;
		border-top: 3px solid #fff000;
		border-right: 3px solid #fff000;
		border-radius: 50%;
		animation: animateC 2s linear infinite;
	}



	@keyframes animateC {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes animate {
		0% {
			transform: rotate(45deg);
		}

		100% {
			transform: rotate(405deg);
		}
	}
</style>